<script setup>
import {listParentsApi, updateApi} from "@/api/PermissionApi";
import MyForm from "@/components/MyForm.vue";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {getResponseData} from "@/util";
let permission = JSON.parse(sessionStorage.getItem('permission'));
let permissionParentsItems = ref([]);

// 表单项 + 表单值 + 表单规则
let items = shallowRef([
  {'label': '权限名称', 'prop': 'title', 'span': 12},
  {
    'label': '权限地址', 'prop': 'url', 'span': 12,
    'placeholder': '权限地址必须以 "/" 开头'
  },
  {'label': '权限图标', 'prop': 'icon', 'type': 'icon'},
  {
    'label': '上级权限', 'prop': 'pid', 'type': 'select',
    'optionItems': permissionParentsItems.value
  },
  {'label': '权限描述', 'prop': 'info', 'type': 'textarea'},
]);
let data = shallowReactive(permission);
let rules = {'info': RULE.COMMON_INFO, 'title': RULE.COMM_TITLE};

/* ==================== 查询全部父权限 ==================== */


async function listParents() {
  let data = getResponseData(await listParentsApi());
  if (data) {
    permissionParentsItems.value.push({'label':'无上级权限','value':0})
    Object.values(data).forEach(data => {
      permissionParentsItems.value.push({'label': data['title'], 'value': data['id']});
    });
  }
}

onMounted(() => listParents())

</script>

<template>

  <my-nav :items="[
    {'icon': 'User', 'label': '权限管理', 'url': 'ums/Permission'},
    {'icon': 'User', 'label': '权限列表', 'url': 'ums/Permission'},
    {'icon': 'User', 'label': '修改权限'},
  ]"/>

  <el-divider/>
  <el-card v-if="permissionParentsItems" className="permission-update-card" header="修改权限信息">
    <my-form type="update" :items="items" :data="data" :rules="rules"
             :api="updateApi" :fn="() => router.push('/ums/Permission')"/>
  </el-card>

</template>

<style scoped lang="scss">
.permission-insert-card {
  margin: auto; // 居中
  width: 60%; // 宽度
}
</style>